/// Package imports
import 'package:flutter/material.dart';

/// Chart import
import 'package:syncfusion_flutter_charts/charts.dart';

/// Local imports
import '../../../../model/sample_view.dart';
import '../../../../widgets/custom_button.dart';

/// Render the semi doughnut series.
class DoughnutSemi extends SampleView {
  /// Creates the semi doughnut series.
  const DoughnutSemi(Key key) : super(key: key);

  @override
  _DoughnutSemiState createState() => _DoughnutSemiState();
}

/// State class of semi doughunut series.
class _DoughnutSemiState extends SampleViewState {
  _DoughnutSemiState();
  int startAngle = 270;
  int endAngle = 90;
  @override
  Widget buildSettings(BuildContext context) {
    return ListView(
      children: <Widget>[
        Container(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Text('Start Angle  ',
                  style: TextStyle(fontSize: 16.0, color: model.textColor)),
              Container(
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(40, 0, 0, 0),
                  child: CustomDirectionalButtons(
                    minValue: 90,
                    maxValue: 270,
                    initialValue: startAngle.toDouble(),
                    onChanged: (double val) => setState(() {
                      startAngle = val.toInt();
                    }),
                    step: 10,
                    iconColor: model.textColor,
                    style: TextStyle(fontSize: 20.0, color: model.textColor),
                  ),
                ),
              ),
            ],
          ),
        ),
        Container(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.fromLTRB(0, 15, 0, 0),
                child: Text('End Angle ',
                    style: TextStyle(fontSize: 16.0, color: model.textColor)),
              ),
              Container(
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(50, 0, 0, 0),
                  child: CustomDirectionalButtons(
                    minValue: 90,
                    maxValue: 270,
                    initialValue: endAngle.toDouble(),
                    onChanged: (double val) => setState(() {
                      endAngle = val.toInt();
                    }),
                    step: 10,
                    iconColor: model.textColor,
                    style: TextStyle(fontSize: 20.0, color: model.textColor),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return _getSemiDoughnutChart();
  }

  /// Returns the circular series with semi doughunut series.
  SfCircularChart _getSemiDoughnutChart() {
    return SfCircularChart(
      title: ChartTitle(text: isCardView ? '' : 'Sales by sales person'),
      legend: Legend(isVisible: !isCardView),
      centerY: isCardView ? '65%' : '60%',
      series: _getSemiDoughnutSeries(),
      tooltipBehavior: TooltipBehavior(enable: true),
    );
  }

  /// Returns  semi doughnut series.
  List<DoughnutSeries<ChartSampleData, String>> _getSemiDoughnutSeries() {
    final List<ChartSampleData> chartData = <ChartSampleData>[
      ChartSampleData(x: 'David', y: 75, text: 'David 74%'),
      ChartSampleData(x: 'Steve', y: 35, text: 'Steve 35%'),
      ChartSampleData(x: 'Jack', y: 39, text: 'Jack 39%'),
      ChartSampleData(x: 'Others', y: 75, text: 'Others 75%')
    ];
    return <DoughnutSeries<ChartSampleData, String>>[
      DoughnutSeries<ChartSampleData, String>(
          dataSource: chartData,
          innerRadius: '70%',
          radius: isCardView ? '100%' : '59%',
          startAngle: startAngle ?? 270,
          endAngle: endAngle ?? 90,
          xValueMapper: (ChartSampleData data, _) => data.x,
          yValueMapper: (ChartSampleData data, _) => data.y,
          dataLabelMapper: (ChartSampleData data, _) => data.text,
          dataLabelSettings: DataLabelSettings(
              isVisible: true, labelPosition: ChartDataLabelPosition.outside))
    ];
  }
}
